<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.song {
			width: 300px;
			height: 300px;
			border:1px solid #ccc;
			margin-top: 20px;
			float: left;
			margin-left: 20px;
		}
		* {
			margin: 0;
		}
		.song img {
			height: 220px;
			width: 300px;
		}
	</style>
	<script type="text/javascript" src="../../jquery-3.4.1.js"></script>
</head>
<body>
	<h2><span></span>的歌单</h2>
	<input type="search" name="" id="search" placeholder="搜索音乐">
	<button type="" id="searchbutton">搜索</button>
	<div class="list">
		<!-- <div class="song">
			<h4>1</h4>
			<p>2</p>
			<audio src="http://m7.music.126.net/20191025221251/0c3e4149eb778bca22684d9272c9a60c/ymusic/454d/c27b/ce44/d2256950fb42a5715bb8b1c625bb7a8f.mp3"></audio>
			<img src="" alt="">
			<button type="">播放</button>

		</div> -->
	</div>
	<script type="text/javascript">
	function dosomething(data){
		console.log(data);
		data.list.forEach(function(value,index){
			var song = document.createElement("div");
			song.className = "song";
			song.innerHTML = '<h4>' + value.title + '</h4><p>' + value.author + '</p><audio src="' + value.src + '"></audio><img src="' +  value.image + '" alt=""><button type="" class="play">播放</button><button type="" class="pause">暂停</button>';
			document.querySelector(".list").appendChild(song);
		})
	}
	var script = document.createElement("script");
	script.src = 'https://api.asilu.com/cloud-music/163/?callback=dosomething&type=playlist&id=507681959';
	var head = document.head;
	head.appendChild(script);
	document.querySelector(".list").addEventListener("click",function(e){
		if(e.target.innerHTML == '播放') {
			for(var i = 0;i < e.target.parentNode.parentNode.children.length;i++){
				e.target.parentNode.parentNode.children[i].children[2].pause();
			}
			e.target.parentNode.children[2].play();
		} else {
			e.target.parentNode.children[2].pause();
		}
	})
	document.querySelector("#searchbutton").addEventListener("click",function(){
		var songs = document.querySelectorAll(".song");
		console.log(songs);
		document.querySelector(".list").innerHTML = '';
		songs.forEach(function(value,index){
			if(value.querySelector("h4").innerHTML == document.querySelector("#search").value) {
				document.querySelector(".list").appendChild(value);
			}
		})
	})
	</script>
</body>
</html>